<template>
  <div class="all">
    <TiebaTitle />
    <el-card class="thread" :body-style="{ padding: '10px' }" shadow="never">
      <div class="left">
        <span class="red">3</span>
        回复贴
      </div>
      <div class="right">
        <a title="返回贴吧">&lt;返回</a>
      </div>
    </el-card>
    <div class="pb_content">
      <div class="left_section">
        <div class="core_title_wrap_bright" style="top: 0px">
          <div class="core_title_bg j_core_title_bg"></div>
          <h3 class="core_title_txt" title="为啥选天使队友就骂我，游戏还没开始" style="width: 416px">
            为啥选天使队友就骂我，游戏还没开始
          </h3>
          <span class="core_title_btns">
            <a rel="noopener" id="lzonly_cntn" href="/p/8065148296?see_lz=1" alog-alias="lzonly"
              class="btn-sub btn-small"><span id="lzonly" class="d_lzonly_bdaside">只看楼主</span></a><a rel="noopener"
              class="btn-sub btn-small j_favor" data-field='{"status":0,"is_anonym":false}'>收藏</a><a rel="noopener"
              href="#" id="quick_reply" class="btn-small btn-sub j_quick_reply"><i class="icon-reply"></i>回复</a>
          </span>
          <div id="j_favthread" class="p_favthread">
            <p class="p_favthr_tip"></p>
          </div>
        </div>
        <!-- 评论开始 -->
        <div class="post_bright" v-for="(content,index) in commentList  ">
          <div class="d_author">
            <div class="louzhubiaoshi_wrap">
              <div class="louzhubiaoshi j_louzhubiaoshi" author="545459qq">
                <a href="/p/8065148296?pid=145722622178&amp;see_lz=1#145722622178"></a>
              </div>
            </div>
            <ul class="p_author">
              <li class="icon">
                <div class="icon_relative j_user_card">
                  <a target="_blank"
                    href="/home/main?id=tb.1.96dbb519.1ObkT5AggbRRMCm9-PbEbA?t=1644566484&amp;fr=pb"><img
                      username="545459qq" class=""
                      src="https://gss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/tb.1.96dbb519.1ObkT5AggbRRMCm9-PbEbA?t=1644566484" /></a>
                </div>
              </li>
              <li class="d_nameplate"></li>
              <li class="d_name" data-field='{"user_id":3458080042}'>
                <a data-field='{"un":"545459qq","id":"tb.1.96dbb519.1ObkT5AggbRRMCm9-PbEbA?t=1644566484"}'
                  alog-group="p_author" class="p_author_name j_user_card"
                  href="/home/main?id=tb.1.96dbb519.1ObkT5AggbRRMCm9-PbEbA?t=1644566484&amp;fr=pb"
                  target="_blank">{{content.user.username}}</a>
                用户id {{content.user._id}}
                <br>
                评论id {{content._id}}
              </li>
              <li class="d_icons">
                <span class="icon_wrap"><a target="_blank" href="https://tieba.baidu.com/f?kw=玩家认证&amp;ie=utf-8">
                    <div class="j_icon_slot_refresh"></div>
                  </a></span>
              </li>
              <li class="l_badge" style="display: block">
                <div class="p_badge">
                  <a href="/f/like/level?kw=%E8%8B%B1%E9%9B%84%E8%81%94%E7%9B%9F%E6%89%8B%E6%B8%B8&amp;ie=utf-8&amp;lv_t=lv_nav_intro"
                    target="_blank" class="user_badge" title="本吧头衔7级，经验值286，点击进入等级头衔说明页">
                    <div class="d_badge_title">开始上分</div>
                    <div class="d_badge_lv">7</div>
                  </a>
                </div>
              </li>
            </ul>
          </div>
          <div class="d_post_content_main" data-author="0">
            <div class="p_content">
              <div class="d_post_content">
                {{content.content}}
              </div>
              <br />
              <br />
              <div class="user-hide-post-down" style="display: none"></div>
            </div>
            <div class="core_reply">
              <div class="core_reply_tail">
                <div class="post-tail-wrap">
                  点赞
                  <div @click="Fabulous(content._id,index)">
                    <svg-icon v-if="!content.isLike" iconName="icon-dianzan"></svg-icon>
                    <svg-icon v-if="content.isLike" iconName="icon-dianzan1"></svg-icon>
                  </div>

                  <span>IP属地:山东</span>
                  <span style="color:red" @click="DeleteComment(content._id)">删除：删除这条数据</span>
                  <span class="question-image"></span>
                  <span class="j_jb_ele">
                    <a rel="noopener" href="###"><img
                        src="//tb2.bdstatic.com/tb/static-pb/img/jubao_button_4ee5c4f.png" /></a>
                  </span>
                  <span class="tail-info">来自<a rel="noopener" data-tip="贴吧群时代开启，快到群里来！"
                      href="http://c.tieba.baidu.com/c/s/download/pc?tab=qunliao"
                      target="_blank">iPhone客户端</a></span><span class="tail-info">5楼</span><span
                    class="tail-info">2022-10-06 10:52</span>
                  <div class="j_lzl_r">
                    <a rel="noopener" href="#" class="lzl_link_unfold" style="display: ">回复</a><span
                      class="lzl_link_fold" style="display: none">收起回复</span>
                  </div>
                </div>
                <ul class="p_props_tail props_appraise_wrap"></ul>
              </div>
              <div class="j_lzl_container core_reply_wrapper" style="min-height: 0px; display: none"
                data-field='{"pid":145725584292,"floor_num":5,"total_num":0}'>
                <div class="core_reply_border_top"></div>
                <div class="j_lzl_c_b_a core_reply_content">
                  <ul class="j_lzl_m_w" style="display: none">
                    <li class="lzl_li_pager j_lzl_l_p lzl_li_pager_s" data-field="{total_num:0,total_page:0}">
                      <a rel="noopener" class="j_lzl_p btn-sub btn-small pull-right" href="##"><i
                          class="icon-reply"></i>我也说一句</a>
                      <p>&nbsp;</p>
                    </li>
                  </ul>
                  <div class="lzl_editor_container j_lzl_e_c lzl_editor_container_s" style="display: none"></div>
                  <input type="text" class="j_lzl_e_f_h" style="display: none" />
                </div>
                <div class="core_reply_border_bottom"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- 评论结束 -->
      </div>
      <div class="right_section">
        <div class="region-login">
          <h4 class="login-header">
            <i class="baidu-logo-small"></i>
            登录百度帐号
          </h4>
          <div class="tang-pass-login">
            <el-form label-width="120px">
              <el-form-item label-width="auto" class="form_input">
                <el-input placeholder="手机号/用户名/邮箱" />
              </el-form-item>
              <el-form-item label-width="auto" class="form_input">
                <el-input placeholder="密码" />
              </el-form-item>
              <el-checkbox label="下次自动登录" size="small" />
              <a>忘记密码?</a>
              <el-button type="primary" size="large " class="ring">登录</el-button>
            </el-form>
          </div>

          <div class="region_bright">
            <h4 class="region_header">
              <span class="title">扫二维码下载贴吧客户端</span>
            </h4>
            <div class="region_cnt">
              <div class="app_download_icon"></div>
              <div class="app_download_info">
                下载贴吧APP<br />看高清直播、视频！
              </div>
            </div>
          </div>
          <div class="topic_list_box">
            <div class="item_hd">
              <span class="title">贴吧热议榜</span>
            </div>
            <ul class="topic_list_hot">
              <li class="topic_item">
                <span class="topic_flag_hot">1</span><a target="_blank"
                  href="http://tieba.baidu.com/hottopic/browse/hottopic?topic_id=8414306&amp;topic_name=%E5%8B%87%E5%A3%AB%E8%BF%BD%E6%A2%A6%E6%A0%BC%E6%9E%97%E5%92%8C%E6%99%AE%E5%B0%94%E5%8F%91%E7%94%9F%E8%82%A2%E4%BD%93%E5%86%B2%E7%AA%81"
                  class="topic_name">勇士追梦格林和普尔发生肢体冲突</a>
                <div class="topic_num">806355</div>
              </li>
              <li class="topic_item">
                <span class="topic_flag_hot">2</span><a target="_blank"
                  href="http://tieba.baidu.com/hottopic/browse/hottopic?topic_id=8414302&amp;topic_name=%E4%B8%AD%E5%9B%BD%E5%A5%B3%E6%8E%923%E6%AF%940%E6%B3%A2%E5%A4%9A%E9%BB%8E%E5%90%84"
                  class="topic_name">中国女排3比0波多黎各</a>
                <div class="topic_num">688920</div>
              </li>
              <li class="topic_item">
                <span class="topic_flag_hot">2</span><a target="_blank"
                  href="http://tieba.baidu.com/hottopic/browse/hottopic?topic_id=8414302&amp;topic_name=%E4%B8%AD%E5%9B%BD%E5%A5%B3%E6%8E%923%E6%AF%940%E6%B3%A2%E5%A4%9A%E9%BB%8E%E5%90%84"
                  class="topic_name">中国女排3比0波多黎各</a>
                <div class="topic_num">688920</div>
              </li>
              <li class="topic_item">
                <span class="topic_flag_hot">2</span><a target="_blank"
                  href="http://tieba.baidu.com/hottopic/browse/hottopic?topic_id=8414302&amp;topic_name=%E4%B8%AD%E5%9B%BD%E5%A5%B3%E6%8E%923%E6%AF%940%E6%B3%A2%E5%A4%9A%E9%BB%8E%E5%90%84"
                  class="topic_name">中国女排3比0波多黎各</a>
                <div class="topic_num">688920</div>
              </li>
              <li class="topic_item">
                <span class="topic_flag_hot">2</span><a target="_blank"
                  href="http://tieba.baidu.com/hottopic/browse/hottopic?topic_id=8414302&amp;topic_name=%E4%B8%AD%E5%9B%BD%E5%A5%B3%E6%8E%923%E6%AF%940%E6%B3%A2%E5%A4%9A%E9%BB%8E%E5%90%84"
                  class="topic_name">中国女排3比0波多黎各</a>
                <div class="topic_num">688920</div>
              </li>
              <li class="topic_item">
                <span class="topic_flag_hot">2</span><a target="_blank"
                  href="http://tieba.baidu.com/hottopic/browse/hottopic?topic_id=8414302&amp;topic_name=%E4%B8%AD%E5%9B%BD%E5%A5%B3%E6%8E%923%E6%AF%940%E6%B3%A2%E5%A4%9A%E9%BB%8E%E5%90%84"
                  class="topic_name">中国女排3比0波多黎各</a>
                <div class="topic_num">688920</div>
              </li>
            </ul>
          </div>
          <div class="region_bright">
            <ul class="unordered-list">
              <li class="text-overflow">
                <i class="notice-icon notice-icon-screen"></i><a
                  href="http://tieba.baidu.com/f?ie=utf-8&amp;kw=%E8%B4%B4%E5%90%A7%E6%84%8F%E8%A7%81%E5%8F%8D%E9%A6%88"
                  target="_blank">贴吧页面意见反馈</a>
              </li>
              <li class="text-overflow">
                <i class="notice-icon"></i><a
                  href="http://tieba.baidu.com/f?ie=utf8&amp;kw=%E8%B4%B4%E5%90%A7%E6%9B%9D%E5%85%89%E5%8F%B0&amp;fr=wwwt"
                  target="_blank">违规贴吧举报反馈通道</a>
              </li>
              <li class="text-overflow">
                <i class="notice-icon"></i><a href="http://tieba.baidu.com/tb/zt/notice.html"
                  target="_blank">贴吧违规信息处理公示</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- <TiebaComment /> -->

    <el-input v-model="discussContent" placeholder="请输入评论" type="textarea" size="normal" clearable @change="">
    </el-input>
    <el-button type="primary" size="default" @click="CreteComment">提交创建评论</el-button>
    <div id="footer" class="footer"> <span>©2022 Baidu</span><a pv_code="0" href="/tb/eula.html"
        target="_blank">贴吧协议</a><span>|</span><a pv_code="0"
        href="https://tieba.baidu.com/tb/cms/tieba-fe/tieba_promise.html" target="_blank">隐私政策</a><span>|</span><a
        pv_code="0" href="http://tieba.baidu.com/tb/system.html" target="_blank">吧主制度</a><span>|</span><a
        class="ueg_feedback-link" data-site="feedbackLink" pv_code="0" href="http://tieba.baidu.com/hermes/feedback"
        target="_blank">意见反馈</a><span>|</span><a pv_code="0" href="/tb/zt/declare/" target="_blank">网络谣言警示</a></div>

  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "P",
});
</script>

<script setup lang="ts">

import { computed, onMounted, ref, watch } from "vue";
// import _ from "@/utils/local";
import discuss from "@/api/discuss";
// import type { typeDynamicList } from "@/api/bar";
// import { useUserStore } from "@/stores/user"
import { useRouter, useRoute } from "vue-router";

import { useUserStore } from "@/stores/user";
const route = useRoute()
const router = useRouter();
const page = ref(1);
const pagesize = ref(50);
const proposition = ref();
//点赞
const isLike1 = ref(true);
//评论列表
const commentList = ref();
//总数
const count = ref<number>();

const store = useUserStore();




/* 

*/


//评论内容
const discussContent = ref();

interface User {
  _id: string;
  username: string;
  photo: string;
}

interface CommentList {
  _id: string;
  content: string;
  user: User;
  isLike: boolean;
}
// console.log(router, "router");
// console.log(route.query.id, "route");

//封装获取评论函数
async function GetComment() {
  const re = await discuss.requestGetComment(
    page.value,
    pagesize.value,
    proposition.value,
  );
  // console.log(re, "re");
  commentList.value = re.commentList
  count.value = re.count
}

async function GetCommentLogin() {
  const re = await discuss.requestGetCommentLogin(
    page.value,
    pagesize.value,
    proposition.value,
  );
  // console.log(re, "re");
  commentList.value = re.commentList
  count.value = re.count
}

// 请求帖子分页列表
watch([page, pagesize], async () => {
  proposition.value = route.query.id
  // GetComment()
  if (store.$state.token) {
    GetCommentLogin()
  } else {
    GetComment()
  }
}, { immediate: true });

//发表评论
const CreteComment = async () => {
  let re = await discuss.requestCreteComment({
    content: discussContent.value,
    proposition: proposition.value,
  })
  //重新请求
  // GetComment()
  if (store.$state.token) {
    GetCommentLogin()
  } else {
    GetComment()
  }
}

//删除评论
const DeleteComment = async (id: string) => {
  await discuss.requestDeleteComment(id)
  // console.log(11);
  //重新请求
  // GetComment()
  if (store.$state.token) {
    GetCommentLogin()
  } else {
    GetComment()
  }
}
//点赞
const Fabulous = (id: string, index: any) => {
  commentList.value.map(async (item: any) => {
    //找到指定的点赞
    if (item._id === id) {
      //发起请求
      await discuss.requestFabulous(id)
      //改变图标 1111111
      commentList.value[index].isLike = !commentList.value[index].isLike
    }
    return item
  })
}




</script>

<style scoped lang="scss">
html {
  filter: invert(1);
}

// img {
//   filter: invert(0);
// }

.all {


  width: 978px;
  margin: 0 auto;

  .thread {
    width: 978px;
    margin: 0 auto;

    background: #f5f7fa;
    border-bottom: 1px solid #e7e9eb;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    height: 35px;

    .left {
      margin-left: 8px;
      color: #666;
      float: left;
      display: inline;

      .red {
        margin-right: 3px;
        color: #f60;
      }
    }

    .right {
      float: right;
      margin-right: 20px;
      display: inline;
    }
  }


  .pb_content {
    background: url(//tb2.bdstatic.com/tb/static-pb/img/pb_bright_background_7d89132.png) repeat-y;
    width: 980px;
    margin: 0 auto;
    border-right: 1px solid #e5e5e5;

    .left_section {
      width: 740px;
      float: left;
      background: #fafbfc;

      .core_title_wrap_bright {
        width: 740px;
        height: 56px;
        line-height: 56px;
        background: #fff;
        border-bottom: 1px solid #bbbdbf;
        position: relative;

        .core_title_bg {
          background: #f5f3f3;
          position: absolute;
          left: 0;
          top: 0;
          width: 0;
          height: 56px;
          z-index: 1;
          line-height: 95px;
          text-align: right;
          font-size: 12px;
          color: #aea9a9;
          transition: all 1s;
          white-space: nowrap;
          overflow: hidden;
        }

        .core_title_txt {
          width: 416px;
          display: inline;
          position: relative;
          z-index: 10;
          font-family: "microsoft yahei", simhei, sans-serif;
          font-weight: 400;
          font-size: 16px;
          float: left !important;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .core_title_btns {
          position: relative;
          z-index: 10;
          float: right !important;
          line-height: 56px;

          a {
            display: inline-block;
            margin-right: 10px;
            padding: 4px 8px;
            font-size: 12px;
            line-height: normal !important;

            background-color: #fff;
            color: #333;

            border-radius: 2px;
            border: 1px solid #ccc;
            cursor: pointer;
          }

          .icon-reply {
            width: 16px;
            height: 13px;
            display: inline-block;
            vertical-align: middle;
            background: url(//tb2.bdstatic.com/tb/static-pb/widget/forum_title/images/icon_reply_ba64e6d.png) no-repeat;
          }
        }
      }

      .post_bright {
        border: 0;
        border-left: 1px solid #e5e5e5;
        border-bottom: 1px solid #e1e4e6;
        background: url(//tb2.bdstatic.com/tb/static-pb/widget/post_list/img/bg_ba2195f.jpg) repeat-y;
        width: 739px;
        overflow: hidden;

        .d_author {
          width: 130px;
          float: left;
          text-align: center;
          padding: 15px 0;

          .louzhubiaoshi_wrap {
            position: relative;
            border: 0 solid red;
            zoom: 1;
            height: 0;

            .louzhubiaoshi {
              position: absolute;
              width: 36px;
              height: 36px;
              top: -15px;
              right: 0;
              background: url(http://tb2.bdstatic.com/tb/static-user/widget/pb_author/images/louzhu_f37d453.png) no-repeat -44px 0;
              border: 0 solid red;

              a {
                display: block;
                width: 36px;
                height: 36px;
              }
            }
          }

          .p_author {
            position: relative;
            text-align: center;

            .icon_relative {
              margin-top: 0;
              position: relative;
              display: inline-block;
              zoom: 1;
              top: 0;
              left: 0;
              padding: 4px;

              a {
                background: none repeat scroll 0 0 #fff;
                border: 1px solid #ccc;
                display: block;
                height: 80px;
                padding: 3px;
                width: 80px;
                cursor: pointer;

                img {
                  float: left;
                  width: 80px;
                  height: 80px;
                }
              }
            }

            .d_nameplate {
              margin-bottom: 8px;
              margin-top: -2px;
            }

            .d_icons {
              margin-top: 8px;

              .icon_wrap {
                overflow: hidden;
                width: 80px;
                margin: 0 auto 5px;
                float: none;
                padding: 0 0 3px 3px;
                background-color: #fff;
                border: 1px solid #e6e6e6;
                border-radius: 1px;
                display: block;

                a {
                  background: url(https://tb3.bdstatic.com/public/icon/104_14.png?stamp=1664328751) no-repeat -3800px 0;
                  top: 0px;
                  left: 0px;
                  margin-right: 0;
                  margin-top: 3px;
                  width: 14px;
                  height: 14px;
                  float: left;
                }
              }
            }

            .l_badge {
              display: block;
              position: relative;
              top: 0;
              left: 0;
              margin-top: 9px;

              .user_badge {
                display: block;
                background: #fff;
                border: solid 1px #e6e6e6;
                width: 98px;
                height: 28px;
                line-height: 24px;
                cursor: pointer;
                position: relative;
                margin: 0 auto;

                .d_badge_title {
                  height: 28px;
                  line-height: 28px;
                  color: #4c4c4c;
                  position: absolute;
                  text-align: center;
                  width: 60px;
                  left: 0;
                  font-family: arial, SimSun;
                }

                .d_badge_lv {
                  left: 67px;
                  margin-top: 2px;
                  background: url(http://tb2.bdstatic.com/tb/static-user/widget/pb_author/images/s3_ad6bdc8.gif) no-repeat;
                  padding-top: 3px;
                  color: #b65e00;
                  font-size: 11px;
                  font-weight: 700;
                  position: absolute;
                  text-align: left;
                  padding-left: 8px;
                  width: 25px;
                  height: 25px;
                  line-height: 18px;
                  font-family: arial;
                }
              }
            }
          }
        }

        .d_post_content_main {
          position: relative;
          float: left;
          width: 588px;
          padding: 0 0 8px 20px;
          background: #fff;

          .p_content {
            height: auto !important;
            min-height: 170px;
            position: relative;
            padding: 20px 20px 0 0;

            .d_post_content {
              line-height: 24px;
              font-size: 14px;
              word-wrap: break-word;
              overflow: hidden;
            }
          }

          .core_reply {
            margin-right: 13px;

            .core_reply_tail {
              line-height: 28px;

              .post-tail-wrap {
                float: right;
                color: #999;
                position: relative;

                span {
                  display: inline-block;
                  margin: 0 4px;
                  color: #999;
                }

                .question-image {
                  position: relative;
                  display: inline-block;
                  width: 12px;
                  height: 12px;
                  margin-left: 3px;
                  vertical-align: -2px;
                  cursor: pointer;
                  background: center / contain no-repeat url(//tb2.bdstatic.com/tb/static-pb/widget/tail/images/question_aeddbcb.png);
                }

                .j_jb_ele {
                  a {
                    display: inline-block;
                    margin: 0 4px;
                    color: #999;

                    img {
                      height: 13px;
                      width: 40px;
                      margin-left: 7px;
                      vertical-align: middle;
                      margin-top: -0.2em;
                    }
                  }
                }

                .j_lzl_r {
                  float: right;
                  margin-left: 4px;
                }
              }
            }
          }
        }
      }
    }

    .right_section {
      width: 238px;
      float: right;
      display: inline;
      // background: rgb(239, 198, 198);
      border: 1px solid #e5e5e5;

      overflow: hidden;

      .region-login {
        padding-bottom: 25px;

        .login-header {
          line-height: 33px;
          background-color: #f7f7f7;
          border-bottom: 1px solid #ddd;
          padding-left: 15px;
          margin-left: 1px;
          font-size: 14px;
          font-weight: 700;
          font-family: "microsoft yahei", simhei, sans-serif;

          .baidu-logo-small {
            background: url(//tb2.bdstatic.com/tb/static-common/widget/loginForm/images/baidu_logo_e3d4731.png) no-repeat 6px 0;
            padding-left: 35px;
            font-size: 24px;
            vertical-align: top;
          }
        }

        .tang-pass-login {
          display: block !important;
          visibility: visible !important;
          position: relative;
          padding: 25px 20px 10px;

          .form_input {
            margin-bottom: 15px;
          }

          a {
            margin-left: 45px;
          }

          .ring {
            padding: 0px 80px 0px 80px;
            height: 30px;
            margin-top: 10px;
          }
        }

        .region_bright {
          position: relative;
          padding: 16px 19px;
          border-top: 1px solid #e4e6eb;
          border-bottom: 1px solid #e4e6eb;

          .region_header {
            color: #333;
            font-weight: 700;
            font-family: "microsoft yahei", simhei, sans-serif;
            line-height: 22px;

            .title {
              font-size: 14px;
            }
          }

          .region_cnt {
            margin-top: 10px;
            overflow: hidden;

            .app_download_icon {
              width: 75px;
              height: 75px;
              background: url(//tb2.bdstatic.com/tb/static-pb/widget/app_download/images/icon_f8fdc43.png) center / cover;
              float: right;
            }

            .app_download_info {
              overflow: hidden;
              padding-top: 12px;
              line-height: 24px;
              color: #666;
            }
          }
        }

        .topic_list_box {
          border-top: 1px solid #e4e6eb;
          border-bottom: 1px solid #e4e6eb;

          .item_hd {
            margin-top: 10px;
            position: relative;
            line-height: 34px;
            height: 33px;

            .title {
              margin-left: 16px;
              color: #444;
              font-size: 14px;
              font-weight: 700;
              font-family: STHeiti, "Microsoft Yahei", "Microsoft YaHei", Arial,
                sans-serif;
            }
          }

          .topic_list_hot {
            padding: 0 16px 10px;

            li:nth-child(-n + 3) span {
              background: #ff7f42;
              color: #fff;
              padding: 1px 4px;
              margin-right: 7px;
            }

            .topic_item {
              padding: 5px 0;
              color: #666;
              cursor: pointer;

              .topic_flag_hot {
                display: inline-block;
                text-align: center;
                width: 14px;
                padding: 1px 4px;
                position: relative;
                right: 7px;
              }

              .topic_name {
                white-space: nowrap;
                text-overflow: ellipsis;

                overflow: hidden;
                display: inline-block;
                width: 60%;
                vertical-align: middle;
                color: #666;
              }

              .topic_num {
                color: #999;
                float: right;
              }
            }
          }
        }

        .region_bright {
          position: relative;
          padding: 16px 19px;
          border-top: 1px solid #e4e6eb;

          .unordered-list {
            .text-overflow {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              height: 22px;

              .notice-icon {
                background: url(//tb2.bdstatic.com/tb/static-pb/widget/notice/images/tieba_notice_icon_c49c7de.png) no-repeat;
                padding-left: 20px;
              }

              .notice-icon-screen {
                background-position: 0 0;
              }
            }
          }
        }
      }
    }
  }
}

* {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

ul li {
  list-style: none;
}

a {
  color: #2d64b3;
  text-decoration: none;
  background-color: transparent;
}

.footer {
  clear: both;
  line-height: 22px;
  text-align: center;
  margin: 8px auto 0;
  display: block;
}
</style>